<template>
  <button
    :class="['my-btn', type]"
    @click="btnClick($event)"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: String
  },
  methods: {
    btnClick(e) {
      this.$emit('click', e);
    }
  }
}
</script>

<style lang="scss">
  .my-btn {
    height: 30px;
    padding: 0 15px;
    color: #fff;
    border: 1px solid #ddd;
    background-color: #fb7299;

    &.primary {
      color: #fff;
      border: 1px solid #ddd;
      background-color: #00aeec;
    }

    &.success {
      color: #fff;
      border: 1px solid #ddd;
      background-color: #42b784;
    }

    &.danger {
      color: #fff;
      border: 1px solid #ddd;
      background-color: #ff013c;
    }

    &.warning {
      color: #fff;
      border: 1px solid #ddd;
      background-color: #fda300;
    }
  }
</style>